<template>
	<div class="bear-SelectPop">
		<slot :option="mapOptions[curIndex]||{}"></slot>
		<div ref="menu" class="bear-menu">
			<div v-for="(option,index) in mapOptions"
				 :key="index"
				 @click="$_bear_selectFn(option.value)">{{option.name}}</div>
		</div>
	</div>
</template>

<script>
	/* global utils */
	/**
	 * @author 唐国雄
	 * pop弹出式的select
	 * 属性----------------------
	 * v-model			当前选择的值,不存在时默认第一项
	 * :name-attr		名称字段
	 * :value-attr		值字段
	 * :options			选项,[{name:<String>,value:<*>},...]
	 * :simple			是否是简单型的选项(options元素本身既是name也是value)
	 * 插槽----------------------
	 * #default			显示内容
	 * 事件----------------------
	 * @change			选择改变
	 *
	 * @typedef SelectPop
	 * @event SelectPop#change
	 * @type {*} 变化后的值
	 */
	export default{
		name:'SelectPop',
		props:{
			// 名称字段
			nameAttr:{
				type:String,
				default:'name'
			},
			// 值字段
			valueAttr:{
				type:String,
				default:'value'
			},
			/**
			 * 选项
			 * @typedef OptionItem
			 * @property {String} name 显示名称
			 * @property {*} value 实际值
			 */
			/**
			 * 所有选项
			 * @type {OptionItem[]}
			 */
			options:{
				type:Array,
				default(){
					return [];
				}
			},
			// 是否是简单型的选项
			simple:Boolean,
			value:null
		},
		data(){
			return {
				outValue:this.value
			};
		},
		computed:{
			curValue:{
				get(){
					const value=this.outValue;
					const mapOptions=this.mapOptions;
					const pos=mapOptions.findIndex(function(ele){
						return ele.value===value;
					});
					if(pos!==-1){
						return value;
					}else if(mapOptions.length>0){
						return mapOptions[0].value;
					}else{
						return null;
					}
				},
				set(val){
					this.outValue=val;
				}
			},
			curIndex(){
				const curValue=this.curValue;
				return this.mapOptions.findIndex(function(ele){
					return ele.value===curValue;
				});
			},
			mapOptions(){
				const nameAttr=this.nameAttr;
				const valueAttr=this.valueAttr;
				if(this.simple){
					return this.options.map(function(ele){
						return {
							name:ele,
							value:ele
						};
					});
				}else{
					return this.options.map(function(ele){
						return {
							name:ele[nameAttr],
							value:ele[valueAttr]
						};
					});
				}
			}
		},
		watch:{
			value(val){
				this.outValue=val;
			},
			curValue(val){
				this.$emit('change',val);
				this.$emit('input',val);
			}
		},
		mounted(){
			this.$emit('input',this.curValue);
			this.tipInstance=utils.tippy(this.$el,{
				content:this.$refs.menu,
				trigger:'click',
				animation:'scale',
				interactive:true,
				ignoreAttributes:true,
				allowHTML:true,
				placement:'bottom'
			});
		},
		beforeDestroy(){
			this.tipInstance.destroy();
		},
		methods:{
			$_bear_selectFn(value){
				this.tipInstance.hide();
				this.curValue=value;
				this.$emit('input',value);
			}
		}
	};
</script>

<style lang="scss">
	.bear-SelectPop{
		~[data-tippy-root]{
			.bear-menu{
				>div{
					padding:5px 10px;
					font-size:14px;
					&:not(:last-child){
						border-bottom:1px solid #fff;
					}
				}
			}
		}
	}
</style>
